<template>
	<view class="cu-capsule radius">
		<view class="cu-tag " :class="[index==TabCur?selectColor:noselectColor]" v-for="(item,index) in datas" :key="index" @click.stop="tabSelect" :data-id="index">
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0
			};
		},
		name: 'cu-nav',
		computed: {
			styles() {
				var style = ""
				return style
			}
		},
		props: {
			datas: Array,
			bgColor: {
				type: String,
				default: ''
			},
			current: {
				type: [String, Number],
				default: 0
			},
			cur: {
				type: [String, Boolean],
				default: false
			},
			average: {
				type: [String, Boolean],
				default: true
			},
			selectColor: {
				type: String,
				default: 'bg-orange'
			},
			noselectColor: {
				type: String,
				default: 'line-orange'
			},
			textstyle: {
				type: String,
				default: ''
			}
		},
		watch: {
			current: function(data) {
				this.TabCur = data;
			}
		},
		created() {
			this.TabCur = this.current;
		},
		methods: {
			onClick() {
				this.$emit('onclick', true);
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.$emit('onchange', this.TabCur);
			}
		}
	}
</script>

<style scoped>
	.item-cur {
		height: 6upx;
		width: 70upx;
		border-radius: 3upx;
	}
</style>
